<template>
  <div class="AccountCatTreeSelect">
    <el-tree-select
        filterable
        @focus="focus"
        clearable
        highlight-current
        :expand-on-click-node="false"
        :default-expand-all="isExpandAll"
        :multiple="multiple"
        v-model="showValue"
        :data="userAccountCatOptions"
        :props="{ value: 'userCategoryId', label: 'name', children: 'children' }"
        value-key="userCategoryId"
        placeholder="请选择"
        check-strictly
    />
  </div>
</template>
<script setup name="AccountCatTreeSelect">
import {listUserAccountCat} from "@/api/easybook/userAccountCat.js";
import {pageConfig} from "@/utils/globalVar.js";
const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: ""
  },
  multiple: {
    type: Boolean,
    default: false
  }
});
const emit = defineEmits(['update:modelValue']);
const {proxy} = getCurrentInstance();
const userAccountCatOptions = ref([]);
const isExpandAll = ref(true);
const loading = ref(false);
function getList() {
  loading.value = true;
  listUserAccountCat({
    ...pageConfig
  })
      .then(response => {
        userAccountCatOptions.value = proxy.handleTree(response.rows,
            "userCategoryId",
            "parentId");
      });
}
function toggleExpandAll() {
  isExpandAll.value = !isExpandAll.value;
}
onMounted(() => {
  //getList()
})
const showValue = computed({
  get() {
    if (props.multiple) {
      return props.modelValue || [];
    }
    return props.modelValue || "";
  },
  set(val) {
    emit('update:modelValue', val)
  }
});

const focus = () => {
  getList()
}
</script>
<style scoped lang="scss">
.AccountCatTreeSelect {
}
</style>
